diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-01-25 11:17:37 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-01-25 11:17:37 +0700 |
| commit | ebc09c5062cc7996b0f2aaf879062fc950c2e1c2 (patch) | |
| tree | 3b031b68afa9aaaca156986382670490c32f0e18 /src/pages/my/transactions/[slug].js | |
| parent | ee4297280c1305c7e03bedd4df63ccf136c28c6c (diff) | |
Transaction detail and variant card component
Diffstat (limited to 'src/pages/my/transactions/[slug].js')
| -rw-r--r-- | src/pages/my/transactions/[slug].js | 126 |
1 files changed, 0 insertions, 126 deletions
diff --git a/src/pages/my/transactions/[slug].js b/src/pages/my/transactions/[slug].js deleted file mode 100644 index a76b0c4d..00000000 --- a/src/pages/my/transactions/[slug].js +++ /dev/null @@ -1,126 +0,0 @@ -import { ArrowDownOnSquareIcon, ArrowDownTrayIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from "@heroicons/react/24/outline"; -import AppBar from "@/components/layouts/AppBar"; -import Layout from "@/components/layouts/Layout"; -import LineDivider from "@/components/elements/LineDivider"; -import WithAuth from "@/components/auth/WithAuth"; -import { useState } from "react"; - -const Row = ({ label, children }) => ( - <div className="grid grid-cols-2"> - <p className="leading-normal text-gray_r-11">{ label }</p> - <div className="text-right leading-normal"> - { children } - </div> - </div> -); - -const Section = ({ children }) => ( - <div className="px-4 pb-4 flex flex-col gap-y-4"> - { children } - </div> -); - -const TitleRow = ({ label, active, onClick }) => ( - <div className="flex justify-between p-4" onClick={onClick}> - <p className="font-medium leading-normal">{ label }</p> - { onClick && ( active ? ( - <ChevronUpIcon className="w-5 h-5" /> - ) : ( - <ChevronDownIcon className="w-5 h-5" /> - ) ) } - </div> -); - -export default function DetailTransactions() { - const [ activeSection, setActiveSection ] = useState({ - purchase: false, - shipping: false, - invoice: false, - }); - - const toggleSection = ( name ) => { - setActiveSection({ - ...activeSection, - [name]: !activeSection[name] - }); - }; - - return ( - <WithAuth> - <Layout> - <AppBar title="Detail Transaksi" /> - - <div className="text-caption-1"> - <div className="p-4 flex flex-col gap-y-4"> - <Row label="Status Transaksi"> - <span className="badge-green">Pending Quotation</span> - </Row> - <Row label="No Transaksi">SO/2023/03212</Row> - <Row label="Purchase Order">PO/2023/02123</Row> - <Row label="Dokumen PO"><a href="">Download</a></Row> - <Row label="Metode Pembayaran">BCA Transfer</Row> - <Row label="Ketentuan Pembayaran">Cash Before Delivery</Row> - <Row label="Nama Sales">Rafi Zadanly</Row> - <Row label="Waktu Transaksi">01 Januari 2023</Row> - </div> - - <LineDivider /> - - <TitleRow - label="Detail Produk" - active={false} - /> - - <LineDivider /> - - <TitleRow - label="Detail Pembeli" - active={activeSection.purchase} - onClick={() => toggleSection('purchase')} - /> - { activeSection.purchase && ( - <Section> - <Row label="Nama">John Doe</Row> - <Row label="Email">johndoe@gmail.com</Row> - <Row label="No Telepon">081223538754</Row> - <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row> - </Section> - ) } - - <LineDivider /> - - <TitleRow - label="Detail Pengiriman" - active={activeSection.shipping} - onClick={() => toggleSection('shipping')} - /> - { activeSection.shipping && ( - <Section> - <Row label="Nama">John Doe</Row> - <Row label="Email">johndoe@gmail.com</Row> - <Row label="No Telepon">081223538754</Row> - <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row> - </Section> - ) } - - <LineDivider /> - - <TitleRow - label="Detail Penagihan" - active={activeSection.invoice} - onClick={() => toggleSection('invoice')} - /> - { activeSection.invoice && ( - <Section> - <Row label="Nama">John Doe</Row> - <Row label="Email">johndoe@gmail.com</Row> - <Row label="No Telepon">081223538754</Row> - <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row> - </Section> - ) } - - </div> - </Layout> - </WithAuth> - ); -}
\ No newline at end of file |
